<template>
  <el-form
    ref="formRef"
    :model="form"
    :rules="rules"
    :inline="inline"
    :label-position="labelPosition"
    :label-width="labelWidth"
    :size="size"
    :disabled="disabled"
  >
    <!-- 传入formItem 可以用简单的表单，也可以自定义复杂的slot进来 -->
    <el-row v-if="formItem&&formItem.length>0">
      <el-col
        v-for="item in formItem"
        :key="item.name"
        :span="item.column"
      >
        <el-form-item
          :label="item.label"
          :label-width="item.labelWidth"
          :required="item.required"
          :rules="item.rules"
          :prop="item.prop"
        >
          <!-- 输入框 -->
          <m-input
            v-if="item.type==='input'"
            v-model="form[item.prop]"
            clearable
          />
          <!-- 文本框 -->
          <m-input
            v-if="item.type==='textarea'"
            v-model="form[item.prop]"
            type="textarea"
          />
          <!-- 下拉框 -->
          <m-select
            v-if="item.type==='select'"
            v-model="form[item.prop]"
            clearable
            :options="item.options"
            @visible-change="item.handleVisible"
          />
          <!-- 多选框 -->
          <el-checkbox-group
            v-if="item.type==='checkbox'"
            v-model="form[item.prop]"
            @change="item.handleChange"
          >
            <el-checkbox
              v-for="checkboxItem in item.options"
              :key="checkboxItem.value"
              :label="checkboxItem.label"
            >
              {{ checkboxItem.label }}
            </el-checkbox>
          </el-checkbox-group>
          <!-- 单选框 -->
          <el-radio-group
            v-if="item.type==='radio'"
            v-model="form[item.prop]"
            @change="item.handleChange"
          >
            <el-radio
              v-for="radioItem in item.options"
              :key="radioItem.label"
              :label="radioItem.value"
            >
              {{ radioItem.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <slot v-else />
  </el-form>
</template>
<script lang="ts">
// formItem  参数定义
/* [{
    label: '活动名称',
    prop: 'name',
    column: 12,
    type: 'input',
    labelWidth: '100px',
    required: true,
    rules: [{ required: true, message: '请输入活动名称' }]
    options: [{
      value: '选项4',
      label: '龙须面'
    }]
  }] */
import { Component, Vue, Prop } from 'vue-property-decorator'
interface formObj{
  [propName:string]:any
}
@Component({
  name: 'MForm'
})
export default class extends Vue {
  @Prop({ default: () => {} }) private form?: formObj;
  @Prop({ default: () => {} }) private rules?: formObj;
  @Prop({ default: () => [] }) private formItem?: formObj[];
  @Prop({ default: false }) private disabled?: boolean;
  @Prop({ default: false }) private inline?: boolean;
  @Prop({ default: 'right' }) private labelPosition?: string;
  @Prop({ default: '' }) private labelWidth?: string;
  @Prop({ default: '' }) private size?: string;

  validate(cb:any) {
    (this.$refs.formRef as any).validate(cb)
  }
  resetFields() {
    (this.$refs.formRef as any).resetFields()
  }
  clearValidate(prop?:string | string[]) {
    (this.$refs.formRef as any).clearValidate(prop)
  }
}
</script>
